<template>
  <div class="chart-item row4-full">
    <div class="chart-header">
      <h3>操作统计趋势</h3>
      <div class="chart-tabs">
        <el-radio-group v-model="operationType" @change="handleOperationTypeChange">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="repair">维修</el-radio-button>
          <el-radio-button label="clean">清洗</el-radio-button>
          <el-radio-button label="transfer">转运</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content">
      <div ref="operationTrendChart" class="chart-row4"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'OperationTrendChart',
  data() {
    return {
      operationType: 'all',
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.operationTrendChart
        if (!chartDom) return

        this.chart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            formatter: function(params) {
              let result = params[0].name + '<br/>'
              let total = 0
              params.forEach(function(item) {
                total += item.value
                result += item.marker + item.seriesName + ': ' + item.value + '<br/>'
              })
              result += '<b>总计: ' + total + '</b>'
              return result
            }
          },
          legend: {
            data: ['华东库房', '华南库房', '华北库房', '西南库房', '其他库房'],
            top: '5%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02', '02-03'],
            axisLabel: {
              rotate: 0,
              interval: 0,
              fontSize: 11,
              color: '#666'
            },
            axisLine: {
              lineStyle: {
                color: '#e0e0e0'
              }
            }
          },
          yAxis: {
            type: 'value',
            name: '操作数量',
            nameTextStyle: {
              color: '#666',
              fontSize: 12
            },
            axisLabel: {
              color: '#666',
              fontSize: 11
            },
            axisLine: {
              lineStyle: {
                color: '#e0e0e0'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#f0f0f0',
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '华东库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(84, 112, 198, 0.8)' },
                  { offset: 1, color: 'rgba(84, 112, 198, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [45, 52, 48, 61, 55, 67, 73, 69, 72, 68, 75, 81, 78, 85, 79, 88, 92, 86, 89, 95]
            },
            {
              name: '华南库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(145, 204, 117, 0.8)' },
                  { offset: 1, color: 'rgba(145, 204, 117, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [38, 42, 35, 47, 41, 53, 58, 54, 57, 52, 61, 67, 63, 69, 65, 72, 76, 71, 74, 78]
            },
            {
              name: '华北库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(250, 200, 88, 0.8)' },
                  { offset: 1, color: 'rgba(250, 200, 88, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [28, 32, 25, 37, 31, 43, 48, 44, 47, 42, 51, 57, 53, 59, 55, 62, 66, 61, 64, 68]
            },
            {
              name: '西南库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(238, 102, 102, 0.8)' },
                  { offset: 1, color: 'rgba(238, 102, 102, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [18, 22, 15, 27, 21, 33, 38, 34, 37, 32, 41, 47, 43, 49, 45, 52, 56, 51, 54, 58]
            },
            {
              name: '其他库房',
              type: 'line',
              stack: 'Total',
              smooth: true,
              symbol: 'none',
              lineStyle: {
                width: 0
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(115, 192, 222, 0.8)' },
                  { offset: 1, color: 'rgba(115, 192, 222, 0.3)' }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: [12, 16, 9, 21, 15, 27, 32, 28, 31, 26, 35, 41, 37, 43, 39, 46, 50, 45, 48, 52]
            }
          ]
        }

        this.chart.setOption(option)
      })
    },

    handleOperationTypeChange(type) {
      this.operationType = type
      this.$emit('operation-type-change', type)
      // 这里可以根据操作类型更新图表数据
      console.log('操作类型变化:', type)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 组件特有样式 */
.chart-tabs {
  ::v-deep .el-radio-button__inner {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>
